<template>
    <div style="margin-left: 50px">
        <div style="display: flex">
            <span style="font-size: 25px">{{ $t('file.receiveShare') }}</span>

            <div style="margin-left: 5px;margin-right: 5px">
                <el-input placeholder="请输入关键字，如有多条件用，隔开" v-model="searchInfo" style="width: 200px"></el-input>
                <el-button style="margin-left: 5px" type="success" @click="searchFileInfo">
                    <el-icon>
                        <Search/>
                    </el-icon>
                </el-button>
            </div>
        </div>
        <el-table
            style="width: 1200px"
            :data="state.fileList"
            :default-sort="[{ prop: 'fileName', order: 'fileName' },{ prop: 'registerDate', order: 'descending' }]"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="30"/>
            <el-table-column prop="sendShareUuid" sortable label="文件分享id"/>
            <el-table-column prop="shareUuid" label="分享id"/>
            <el-table-column prop="descEmail" label="用户邮箱"/>
            <el-table-column prop="createTime" label="创建时间"/>
            <el-table-column label="操作" width="300">
                <template #default="scope">
                    <el-toolTip content="下载" placement="bottom" effect="light">
                        <el-button type="primary" size="small" style="margin-right: 10px"
                                   @click="downloadFile(scope.row)">
                            <el-icon>
                                <Download/>
                            </el-icon>
                            <!--              下载-->
                        </el-button>
                    </el-toolTip>
                    <el-toolTip content="删除" placement="bottom" effect="light">
                        <el-button type="primary" size="small" @click="deleteFileInfo(scope.row)"
                                   style="margin-right: 10px">
                            <el-icon>
                                <Delete/>
                            </el-icon>
                            <!--            删除-->
                        </el-button>
                    </el-toolTip>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
            <el-pagination
                v-model:currentPage="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total=total
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
        </div>
    </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
import {Plus, Position, Download, Star, Delete, Search} from "@element-plus/icons-vue"
import request from "../request"
import ElNotification, {ElMessage} from "element-plus";
import COS from 'cos-js-sdk-v5'

const state = reactive({
    fileList: [],
    shareFileUrl: '',
    fileInfo: {},
})


// 默认初始位置
const currentPage = ref(1)
// 默认每页个数
const pageSize = ref(10)
const searchInfo = ref('')
const total = ref(10)
onMounted(() => {
    searchFileInfo()
})

const handleSizeChange = (val) => {
    pageSize.value = val
    searchFileInfo()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    searchFileInfo()
}
const searchFileInfo = () => {
    request.get('file/queryShareFileInfoList', {
        params: {
            currentPage: currentPage.value,
            pageSize: pageSize.value,
            searchInfo: searchInfo.value,
        }
    }).then(res => {
        if (res.success) {
            state.fileList = res.data.data
            total.value = res.data.total
        } else {
            ElNotification.error(res.msg)
        }
    })
}
//文件删除
const deleteFileInfo = (file) => {
    request.post('file/deleteShareFileInfos', file).then(res => {
        if (res.success) {
            ElMessage.success(res.msg)
            searchFileInfo()
        }
    })
}
const downloadFile = (fileInfo) => {
    request.post('file/getFileInfo', fileInfo).then(res => {
        if (res.success) {
            downloadFiles(res.data)
        }
    })
}
const downloadFiles = (data) => {
    console.info(data)
    request.get('file/getTencentCosInfo', {timeout: 10000}).then(res => {
        if (res.success) {
            const tencentCos = res.data
            const cos = new COS({
                SecretId: tencentCos.secretId,
                SecretKey: tencentCos.secretKey,
            })
            const key = 'file/' + data.fileName;
            cos.getObjectUrl({
                Bucket: tencentCos.bucket,
                Region: tencentCos.region,     /* 存储桶所在地域，必须字段 */
                Key: key,
                Sign: true
            }, function (err, data) {
                if (err) {
                    return console.log(err)
                }
                const downloadUrl = data.Url + (data.Url.indexOf('?') > -1 ? '&' : '?') + 'response-content-disposition=attachment'; // 补充强制下载的参数
                window.open(downloadUrl); // 这里是新窗口打开 url，如果需要在当前窗口打开，可以使用隐藏的 iframe 下载，或使用 a 标签 download 属性协助下载
            })
        }
    })
}
</script>
